<template>
	<div class="system-role-dialog-container">
		<el-dialog :title="state.dialog.title" center class="borderRadius10" v-model="state.dialog.isShowDialog" width="490">
            <el-form class="pr10" ref="roleDialogFormRef" :rules="rules" :model="state.ruleForm" label-width="120px">
				{{state.productCategoryList}}
                <el-form-item label="上级导航：" prop="ID ">
                    <el-cascader style="width: 100%;" v-model="state.ruleForm.ParentID "
                        placeholder="请选择上级分类" :options="state.productCategoryList"
                        :props="{ label: 'RouteName', value: 'ID', children: 'children',checkStrictly: true}" />
                </el-form-item>
                <el-form-item label="导航名称：" prop="RouteName">
                    <el-input style="width: 100%;" v-model="state.ruleForm.RouteName" placeholder="请输入分类名称" />
                </el-form-item>
                <!-- <el-form-item label="导航图标：">
                    <section @click="addImg('categoryUrl', 0)">
                        <el-image v-if="state.ruleForm.categoryUrl != '' && state.ruleForm.categoryUrl != null" class="mr20"
                            style="width:64px; height: 64px;border-radius: 5px;" :src="state.ruleForm.categoryUrl"
                            fit="cover" />
                        <section v-else class="selector-img">
                            <el-icon size="30" color="#999">
                                <Plus />
                            </el-icon>
                        </section>
                    </section>
                </el-form-item> -->
                <el-form-item label="分类排序：">
                    <el-input-number style="width: 100%;" v-model="state.ruleForm.RouteCode" 
                        :precision="0" :step="1" :min="0" :max="10000" />
                </el-form-item>
            </el-form>
            <el-row justify="center" class="mt20">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="onSubmitForm(roleDialogFormRef)">确定</el-button>
            </el-row>
		</el-dialog>
        <AddInformation ref="addInformationRef" @selectFun="selectFun" />
	</div>
</template>

<script setup lang="ts">

import { reactive, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { navList,productCategoryList, productCategoryUpsert ,navEdit} from "/@/api/commodity";
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const emit = defineEmits(['refresh']);
const roleDialogFormRef = ref<FormInstance>()
const addInformationRef = ref();
const state = reactive({
    loading: false,
    addFileType: '',
    dialog: {
        isShowDialog: false,
        type: 'add',
        title: '',
        submitTxt: '',
    },
    ruleForm: {
		id:null,
        categoryId: null, // 分类ID
        ParentID : [] as Array<number>, // 上级分类
        categoryName: '', // 分类名称
        categoryUrl: '', // 分类图标
        RouteName: '', // 导航名称
        RouteCode: 0, // 排序
    },
    // 分类list
    productCategoryList: [] as Array<any>,
})

const rules = reactive<FormRules<any>>({
    ParentID : [{ required: true, message: '请选择协议上级分类', trigger: 'change' }],
    categoryName: [{ required: true, message: '请输入协议分类名称', trigger: 'change' }],
})

// 图片选中
const addImg = (type: string, isArr: Number) => {
    state.addFileType = type;
    addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
    console.log(fileList)
    if (state.addFileType == 'categoryUrl') {
        state.ruleForm.categoryUrl = fileList[0]
    } else if (state.addFileType == 'categoryBigUrl') {
        state.ruleForm.categoryBigUrl = fileList[0]
    }
}


// 获取协议分类
const getCategoryList = async () => {
    // 创建一个新的对象  
    let obj = { RouteName: '无上级', ID: 0, };
    const results = await navList({ projectID: state.ruleForm.id, pageSize:100,pageIndex:1 });
    state.productCategoryList = results.data.Data
    state.productCategoryList.unshift(obj);
	console.log(state.productCategoryList)
}

const onSubmitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid: boolean) => {
        if (valid) {
            state.loading = true;
            let params = {
                ProjectID :  state.ruleForm.id,  // 分类类型
                RouteName : state.ruleForm.RouteName ,
                RouteCode :state.ruleForm.RouteCode,
				ParentID :state.ruleForm.ParentID[0],
            }
            const data  = await navEdit(params);
            if (state.dialog.type == 'edit') {
                ElMessage.success('修改成功');
            } else {
                ElMessage.success('新增成功');
            }
            state.loading = false;
            closeDialog();
            emit('refresh');
        } else {
            return false;
        }
    });
};

// 打开弹窗
const openDialog = (type: string, id:null, row?: any) => {
    state.dialog.type = type;
    console.log(row.isEnable)
    if (type === 'edit') {
        state.dialog.title = '编辑';
        state.dialog.submitTxt = '修 改';
        state.ruleForm = {
			id :id,
            categoryId: row.categoryId,
            ParentID : row.ParentID .length == 0 ? [0] : row.ParentID ,
            categoryName: row.categoryName, // 模板名称
            categoryUrl: row.categoryUrl,
            categoryBigUrl: row.categoryBigUrl,
            sortNumber: row.sortNumber,
            isEnable:row.isEnable,
        };
    } else {
        state.dialog.title = '新增';
        state.dialog.submitTxt = '新 增';
        state.ruleForm = {
			id :id,
            // categoryId: null,
            // superCategoryPath: [] as Array<number>,
            // categoryName: '', // 模板名称
            // categoryUrl:'',
            // categoryBigUrl: '',
            RouteName: '', // 导航名称
            RouteCode: 0, // 排序
        };
    }
    getCategoryList();
    state.dialog.isShowDialog = true;
};


const closeDialog = () => {
    state.dialog.isShowDialog = false;
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang='scss' scoped>
.selector-img {
    width: 64px;
    height: 64px;
    border: 1px solid #ededed;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>